<script lang="ts" setup>
import { Card, Tag } from 'ant-design-vue'
import { growCardList } from '../data'
import { CountTo } from '@/components/CountTo'
import { Icon } from '@/components/Icon'
import { getOrderAnalysis } from '@/api/analysis'
import { ref ,onMounted} from 'vue'

export interface GrowCardItem {
  icon: string
  title: string
  value: number
  total: number
  color: string
  action: string
}
let data:GrowCardItem[]=[]
console.log(data)
onMounted(async() => {
  init();
    async function init() {
      try {
        await getOrderAnalysis().then((res) => {
        //此时数据data.value.dataArr将是Proxy格式
          // 
          let item1 :GrowCardItem = {
              title: '订单数',
              icon: 'visit-count|svg',
              value: res.countMon,
              total: res.countYear,
              color: 'green',
              action: '月',
           }

          
           let item2 :GrowCardItem = {
              title: '交易额',
              icon: 'total-sales|svg',
              value: res.amountMon,
              total: res.amountYear,
              color: 'blue',
              action: '月',
           }
           data.push(item1)
           data.push(item2)
          

        });
      } catch (error) {}
    };
    
    
})
 

defineProps({

  loading: {
    type: Boolean,
  },
})

</script>

<template>
  <div class="md:flex">
    <template v-for="(item, index) in data" :key="item.title">
      <Card
        :loading="loading"
        :title="item.title"
        class="w-full md:w-1/2 !md:mt-0"
        :class="{ '!md:mr-4': index + 1 < 4, '!mt-4': index > 0 }"
      >
        <template #extra>
          <Tag :color="item.color">
            {{ item.action }}
          </Tag>
        </template>

        <div class="flex items-center justify-between px-4 py-4">
          <CountTo prefix="$" :start-val="1" :end-val="item.value" class="text-2xl" />
          <Icon :icon="item.icon" :size="40" />
        </div>

        <div class="flex justify-between p-2 px-4">
          <span>总{{ item.title }}(年)</span>
          <CountTo prefix="$" :start-val="1" :end-val="item.total" />
        </div>
      </Card>
    </template>
  </div>
</template>
